import { defineComponent, h, ref, onMounted } from 'vue'
import type { DataTableColumns } from 'naive-ui'
import { NButton, useMessage, NDataTable, NSpin } from 'naive-ui'
import { useRouter } from 'vue-router'
import dyFormApi from '@/service/api/dyForm'
import pageStyle from '../styles/formList.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
import Edit from './components/Edit'
export default defineComponent({
  name: 'FormList',
  setup() {
    const router: any = useRouter()
    const toast = useMessage()
    const addRef = ref()
    const handAdd = (row?: any) => {
      addRef.value.open(row || null)
    }

    const delShow = ref(false)
    const delLoading = ref(false)
    let oldIndex = -1
    const handDel = (index: number) => {
      oldIndex = index
      delShow.value = true
    }
    const handConfirm = async () => {
      delLoading.value = true
      const { code, message } = await dyFormApi.dels({
        ids: [tableData.value[oldIndex].id]
      })
      delLoading.value = false
      if (code !== 200) {
        toast.error(message)
        return
      }
      toast.success('删除成功')
      delShow.value = false
      fetchData()
    }
    const handPrive = (row: any) => {
      router.push({
        path: '/edit',
        query: {
          id: row.id
        }
      })
    }
    const queryForm = ref({
      pageNo: 1,
      pageSize: 10,
      name: ''
    })
    const columns: DataTableColumns<any> = [
      {
        title: '表单名称',
        key: 'name'
      },
      {
        title: '操作',
        key: 'total',
        width: 200,
        render(row, index) {
          return h('div', [
            h(
              NButton,
              {
                size: 'small',
                type: 'success',
                onClick: () => handPrive(row)
              },
              { default: () => '查看' }
            ),
            h(
              NButton,
              {
                size: 'small',
                type: 'warning',
                class: 'ml10',
                onClick: () => handAdd(row)
              },
              { default: () => '编辑' }
            ),
            h(
              NButton,
              {
                size: 'small',
                class: 'ml10',
                type: 'error',
                onClick: () => handDel(index)
              },
              { default: () => '删除' }
            )
          ])
        }
      }
    ]
    const listLoading = ref(false)
    const total = ref<number>(0)
    const tableData: any = ref([])
    const fetchData = async () => {
      listLoading.value = true
      const { data } = await dyFormApi.list(queryForm.value)
      tableData.value = data.data
      listLoading.value = false
      total.value = data.total
    }

    onMounted(() => {
      fetchData()
    })

    const boxSlot = {
      header: () => (
        <div>
          <div class="title">温馨提示</div>
        </div>
      ),
      default: () => (
        <>
          <div class={pageStyle.delBox}>
            <div class="pt-[10px] pb-[10px]">
              <i class="esayIcon esayIcon-jinggao"></i>
              <span class="tip">确认要删除选中数据吗?</span>
            </div>
            <div class="btns flex align-center justify-end">
              <NButton
                secondary
                onClick={() => {
                  delShow.value = false
                }}
              >
                取消
              </NButton>
              <NButton style={{ marginLeft: '10px' }} type="primary" onClick={handConfirm}>
                {delLoading.value && (
                  <NSpin
                    class="mr-[10px]"
                    size={15}
                    stroke="#fff"
                    v-slots={{
                      icon: () => <i class="esayIcon esayIcon-a-jiazaizhongdaxiao text-white"></i>
                    }}
                  />
                )}
                <span>确认删除</span>
              </NButton>
            </div>
          </div>
        </>
      )
    }
    return () => (
      <>
        <div class={pageStyle.formListBasic}>
          <div class="formListBasic-main">
            <div class="pb20">
              <NButton type="success" onClick={() => handAdd()}>
                <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
                <span class="ml-[10px]">添加</span>
              </NButton>
            </div>
            <NDataTable
              loading={listLoading.value}
              columns={columns}
              data={tableData.value}
              pagination={false}
            />
          </div>
          <Edit ref={addRef} onSuccess={fetchData} />
          <MessageBox width={'400px'} v-model={delShow.value} isClose={false} v-slots={boxSlot} />
        </div>
      </>
    )
  }
})
